<template>
  <div id="background" >
    <!--头部图片-->
    <ImageTop></ImageTop>
    <!--菜品详情-->
    <div class="card mt-2" >
      <div class="card-body m-0 p-0">
        <!--二维码图片-->
        <div class="col-12">
          <img src="static/image/getmoney.png" width="60%" height="200px" class="rounded">
        </div>
        <!--菜品详情列表-->
        <div class="Totalgoods">
          <table cellpadding="8" class="col-12 ml-2" id="test">
            <thead>
            <tr class="col-3" align="left">
              <td>菜品</td>
              <td>&emsp;</td>
              <td>数量</td>
              <td>总价</td>
            </tr>
            </thead>
            <tbody class="col-9">
            <tr class="" align="left" v-for="(item,index) in orderInfo.orderGoodsInfos" v-bind:key="index">
              <td align="left">{{ item.goodsInfo.name }}</td>
              <td>&emsp;</td>
              <td>X{{ item.count }}</td>
              <td>￥{{ item.price*item.count }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!--订单总计-->
    <div class="card mt-2">
      <div class="card-body m-0 p-0">
        <!--总计表格-->
        <table class="col-12 "  cellpadding="10" border="0" align="left" >
          <tr align="left">
            <th><span><i class="bi bi-menu-up"></i> 订单总计</span><br>
              <span style="font-size: 11px">共{{ sum }}件商品</span>
            </th>
            <td align="right">￥{{ orderInfo.totalPrice }}</td>
          </tr>

          <tr align="left">
            <th><span>实际金额</span>
            </th>
            <td align="right" style="color: #CD4F65">￥{{ orderInfo.payPrice }}</td>
          </tr>

          <tr align="left">
            <th ><span >备注</span></th>
            <td align="right">一点都不好吃</td>
          </tr>
        </table>

      </div>
    </div>
    <!--订单信息-->
    <div class="card mt-2" id="info">
      <div class="card-body m-0 p-0">

        <h6 align="left" class="mt-2 ml-1"><i class="bi bi-clipboard-check"></i>  订单信息</h6>
        <!--订单信息列-->
        <div class="m-0 p-0 form-inline" style="color: #666" id="infofont">
          <div class="col-2 m-0 p-0 mt-2 ml-2" align="left">订单编号:</div>
          <div class="col-8 m-0 mt-2 ml-2" align="left">{{ orderInfo.orderNo }}</div>

          <div class="col-2 m-0 p-0 mt-2 ml-2" align="left">支付方式:</div>
          <div class="col-8 m-0 mt-2 ml-2" align="left">线下支付</div>

          <div class="col-2 m-0 p-0 mt-2 ml-2" align="left">支付状态:</div>
          <div class="col-8 m-0 mt-2 ml-2" align="left">支付成功</div>

          <div class="col-2 m-0 p-0 mt-2 ml-2" align="left">就餐方式:</div>
          <div class="col-8 m-0 mt-2  ml-2" align="left">堂食</div>

          <div class="col-2 m-0 p-0 mt-2 mb-3 ml-2" align="left">支付时间:</div>
          <div class="col-8 m-0 mt-2 mb-3 ml-2" align="left">{{ orderInfo.payTime | dateFormat }}</div>
        </div>

      </div>
    </div>



  </div>
</template>

<script>
import service from "../utils/axios";
export default {
  name: "OrderDetails",
  data(){
    return{
      orderInfo: {},
      sum: 0
    }
  },
  filters: {
    dateFormat: function(value){

      var time = new Date(parseInt(value) * 1000)/*.toLocaleString()*//*.replace(/:\d{1,2}$/,' ')*/;
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      m = m > 9 ? m : '0' + m;
      return y+'-'+m+'-'+d+' '+h+':'+mm+':'+s;
      /*return new Date(parseInt(value) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');*/
    }
  },
  methods: {
    queryById: function (id){
      service.get("/order/selectOrderInfo",{
        params:{
          id:id
        }
      }).then(data =>{
        this.orderInfo = data.data.data;

        for (let i = 0; i < this.orderInfo.orderGoodsInfos.length; i++) {
          this.sum += this.orderInfo.orderGoodsInfos[i].count;
        }
      })
    }
  },
  created() {

    this.queryById(this.$route.params.id)
  }
}
</script>

<style scoped>

/* 总计表格span样式*/
span{
  font-weight: 400;
}
#background{
  background-color: #F6F6F6;
}
/* 订单信息列字体样式*/
#infofont{
  font-size: 14px;
}
</style>
